<script setup>
import { ref, reactive, onMounted } from "vue";
const value1 = ref(true);
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import axios from "../../utils/http.js";
const router = useRouter();
const dialogVisible = ref(false);
const dialog = ref(false);
let tableData = ref([]);
let PageNo = ref(1);
let PageSiez = ref(10);
let total = ref(10);
let classes_name = ref("");
let now_colleges = ref("");
let colleges = ref("");
let course = ref([]);
let list = ref([]);
let form = reactive({
  classes_name: "",
  classes_status: "",
  colleges: "",
  course: "",
  user: "",
});
let name = ref("");
let college = ref("");
let courses = ref("");
let teacher_list = ref([]);
let charger_list = ref([]);
let student_list = ref([]);
let teacher = ref("");
let teachers = ref("");
let charger = ref("");
let chargers = ref("");
let student = ref("");
let students = ref("");
let e_id = ref("");
onMounted(() => {
  getclasses();
  getcourses();
  getcolleges();
  getrole();
});
function getrole() {
  axios({
    url: "zhineng/additionclasses/",
    method: "GET",
  }).then((res) => {
    teacher_list.value = res.data.teacher;
    charger_list.value = res.data.charger;
  });
}
function getcolleges() {
  axios({
    url: "zhineng/inquireclasses/" + PageNo.value + "/" + PageSiez.value + "/",
    method: "get",
  }).then((res) => {
    now_colleges.value = res.data.datas;
  });
}
function getclasses() {
  axios({
    url: "zhineng/inquireclasses/" + PageNo.value + "/" + PageSiez.value + "/",
    method: "get"
  }).then((res) => {
    tableData.value = res.data.data;
    total.value = res.data.total;
  });
}
function submit() {
  dialog.value = false;
  axios({
    url: "zhineng/additionclasses/",
    method: "post",
    data: {
      classes_name: name.value,
      colleges: now_colleges.value,
      course: courses.value,
      classes_status: value1.value,
      teacher: teacher.value,
      charger: charger.value,
    },
  }).then((res) => {
    getclasses();
    ElMessage({
      message: "新增成功",
      type: "success",
    });
  });
}
const handleEdit = (row) => {
  dialogVisible.value = true;
  e_id.value = row.id;
  axios({
    url: "zhineng/amendclasses/" + e_id.value + "/",
    method: "get",
  }).then((res) => {
    classes_name.value = res.data.data.classes_name;
    colleges.value = res.data.data.colleges;
    course.value = res.data.course_names;
    value1.value = res.data.data.classes_status;
    teachers.value = res.data.t_name;
    chargers.value = res.data.c_name;
    teacher_list.value.push(res.data.t_name);
    charger_list.value.push(res.data.c_name);
  });
};
const handleDelete = (index, row) => {
  axios({
    url: "zhineng/amendclasses/" + e_id.value + "/",
    method: "delete",
    data: {
      id: row.id,
    },
  }).then((res) => {
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    getclasses();
  });
};
function handleClose(done) {
  done();
}
function handleSizeChange() {
  getclasses();
}
function handleCurrentChange() {
  getclasses();
}
function edit() {
  dialogVisible.value = false;
  axios({
    url: "zhineng/amendclasses/" + e_id.value + "/",
    method: "put",
    data: {
      classes_name: classes_name.value,
      colleges: colleges.value,
      course: course.value,
      classes_status: value1.value,
      teachers: teachers.value,
      chargers: chargers.value
    },
  }).then((res) => {
    getclasses();
    ElMessage({
      message: "修改成功",
      type: "success",
    });
  });
}
function getcourses() {
  axios({
    url: "zhineng/lookcourse/",
    method: "get",
  }).then((res) => {
    list.value = res.data.data;
  });
}
</script>

<template>
  <el-button @click="dialog = true" type="primary">+新增班级</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="classes_name" label="班级名称" width="180" />
    <el-table-column label="班级状态"><template #default="scope">
        <el-switch v-model="value1" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="确定要删除该班级吗?" @confirm="handleDelete(scope.$index, scope.row)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialog" title="班级新增" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="班级名称">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="班级状态">
        <el-switch v-model="value1" />
      </el-form-item>
      <el-form-item label="所属学院">
        <el-input v-model="now_colleges" disabled="True"></el-input>
      </el-form-item>
      <el-form-item label="课程">
        <el-transfer v-model="courses" :data="list" :titles="['全部课程', '已有课程']"
          :props="{ key: 'id', label: 'course_name', value: 'id' }" />
      </el-form-item>
      <el-form-item label="老师">
        <el-select placeholder="请选择老师" v-model="teacher" style="width: 240px; margin-left: 50px">
          <el-option v-for="item in teacher_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任">
        <el-select placeholder="请选择班主任" v-model="charger" style="width: 240px; margin-left: 50px">
          <el-option v-for="item in charger_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialog = false">Cancel</el-button>
        <el-button type="primary" @click="submit()"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogVisible" title="班级修改" width="800px" :before-close="handleClose">
    <el-form :model="form" label-width="120px">
      <el-form-item label="班级名称">
        <el-input v-model="classes_name"></el-input>
      </el-form-item>
      <el-form-item label="班级状态">
        <el-switch v-model="value1" />
      </el-form-item>
      <el-form-item label="所属学院">
        <el-input v-model="colleges" disabled="True"></el-input>
      </el-form-item>
      <el-form-item label="课程">
        <el-transfer v-model="course" :data="list" :titles="['全部课程', '已有课程']"
          :props="{ key: 'id', label: 'course_name', value: 'id' }" />
      </el-form-item>
      <el-form-item label="老师">
        <el-select placeholder="请选择老师" v-model="teachers" style="width: 240px; margin-left: 50px">
          <el-option v-for="item in teacher_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="班主任">
        <el-select placeholder="请选择班主任" v-model="chargers" style="width: 240px; margin-left: 50px">
          <el-option v-for="item in charger_list" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="edit"> 修改 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-pagination id="pagination" v-model:current-page="PageNo" v-model:page-size="PageSiez"
    :page-sizes="[10, 20, 30, 40]" background layout=" prev, pager, next, jumper,->,total, sizes" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" style="width: 100%" />
</template>

<style scoped></style>
